<template>
    <view v-show="show" class="j-share">
        <view class="j-share-bg"></view>
        <view class="j-share-outer">
            <view class="j-share-share">
                <view>
                    <button type="default" :plain="true" @click="shareImage">
                        <uni-icons type="redo-filled" color="#07c160" :size="24"></uni-icons>
                    </button>
                    <text>转发给朋友</text>
                </view>
<!--                <view>-->
<!--                    <button type="default" :plain="true">-->
<!--                        <uni-icons type="pyq" :size="28"></uni-icons>-->
<!--                    </button>-->
<!--                    <text>分享到朋友圈</text>-->
<!--                </view>-->
                <view>
                    <button type="default" :plain="true" @click="addFileToFavorites">
                        <uni-icons type="star-filled" color="#ffb802" :size="28"></uni-icons>
                    </button>
                    <text>收藏</text>
                </view>
                <view>
                    <button type="default" :plain="true" @click="downLoad">
                        <uni-icons type="download-filled" :size="28"></uni-icons>
                    </button>
                    <text>保存到本地</text>
                </view>

            </view>
            <view class="j-share-btn" @click="close">
                取消
            </view>

        </view>
    </view>
</template>

<script>
import AlarmTime from "@/jvss/pagesDevice/device/device-live/setting/IPolice/alarmTime.vue";

export default {
    components: {AlarmTime},
    props: {
        captureUrl: {
            type: String,
            default: ''
        }

    },
    data() {
        return {
            show: false,
        }
    },
    methods: {
        shareImage() {
            // wx.showShareImageMenu({  //分享给朋友
            //     path: qrimg.value,
            //     success: (res) => {
            //         console.log("分享成功：", res);
            //     },
            //     fail: (err) => {
            //         console.log("分享取消：", err);
            //     },
            // })
            wx.shareFileMessage({
                filePath: this.captureUrl,
                success:(res) => {
                    console.log(res)
                    this.close()
                }
            })
        },
        downLoad() {
            console.log(this.captureUrl, '截图的地址')
            wx.saveImageToPhotosAlbum({
                filePath: this.captureUrl,
                success: (res) => {
                    console.log('保存成功')
                    this.close()
                    uni.showToast({
                        title: '保存相册成功',
                        icon: "none"
                    })
                },
                fail: (err) => {
                    console.log('保存失败')
                }
            })
        },
        addFileToFavorites(item) {
            // 收藏图片
            wx.addFileToFavorites({
                filePath: this.captureUrl,
                success(res) {
                    console.log('收藏成功', res)
                    this.close()
                }
            })
        },
        open() {
            this.show = true
        },
        close() {
            this.show = false
        }
    }

}
</script>

<style lang="scss" scoped>
.j-share-bg{
    position:fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}
.j-share-outer{
    width: 80vw;
    height: 320rpx;
    position: absolute;
    z-index: 1001;
    top: 50%;
    box-sizing: border-box;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    overflow: hidden;
    //background:rgba(255,255,255,1);
    background-color: #f9f9f9;
    border-radius: 20rpx;
    //padding:40rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    //background-color: #fff;
    .j-share-share {
        display: flex;
        align-items: center;
        justify-content: left;
        border-bottom: 1rpx solid #ccc;
        padding: 0 20rpx 20rpx;
        view {
            width: 100rpx;
            height: 174rpx;
            //background-color: #000;
            margin: 0 10rpx;
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            button {
                width: 100rpx;
                height: 100rpx;
                line-height: 100rpx;
                padding: 0;
                background-color: #fff;
                border: 1px solid #fff;
                border-radius: 15px;
            }
            text {
                height: 64rpx;
                margin-top: 10rpx;
                font-size: 10px;
            }
        }

    }
    .j-share-btn {
        //margin-top: 10px;
        height: 78rpx;
        line-height: 92rpx;
    }

}
</style>